<template>
	<view>
		<fleet-f-toast ref='f_toast' />
		<!--    预约页面-->
		<!--    选项卡-->
		<view class="tab" v-if="regType!==0">
			<view class="tab-item tab-left" :class="currTab===0?'tab-item-active':''" @click="toReg(0)">按专家预约</view>
			<view class="tab-item tab-right" :class="currTab===1?'tab-item-active':''" @click="toReg(1)">按日期预约</view>
		</view>

		<view class="dept-list">
			<!--      按专家-->
			<view class="dept" v-if="currTab===0" v-for="(item, index) in doctorList" :key="index"
				@click="appoint(item)">
				<view class="left">
					<view class="title">{{item.docName}} ({{item.title}})</view>
					<view>{{item.deptName}}</view>
				</view>
				<view class="right">预约 &gt;</view>
			</view>

			<!--      按日期-->
			<view class="date-list" v-if="currTab===1">
				<view class="date-item" :class="{'date-item-select': index===dateIndex}"
					v-for="(item, index) in pageObj.dateList" :key="index" @click="dateSelect(item, index)">
					<view class="week">{{item.week}}</view>
					<view class="date">{{item.dateTxt}}</view>
				</view>
			</view>
			<view class="dept" v-if="currTab===1" v-for="(item, index) in pageObj.docList" :key="index"
				@click="appoint(item)">
				<view class="left">
					<view class="title">{{item.docName}}({{item.title}}) {{getTxt(item.ampm)}}</view>
					<!--          <view>{{item.description}}</view>-->
					<view v-if="item.docName">{{item.deptName}}</view>
				</view>
				<view class="right">预约 &gt;</view>
			</view>

			<view class="empty"
				v-if="(currTab===0 && doctorList.length===0) || (currTab===1 && pageObj.docList.length===0)">暂无排班数据
			</view>

			<!--号源明细-->
			<uni-popup ref="popup" type="bottom" class="my-popup" background-color="#fff">
				<view class="popup-title">
					<view class="title">
						<text>{{appointInfo.scheduleDate}}</text>
						<text>{{appointInfo.weekName}}</text>
						<text>{{getTxt(appointInfo.ampm)}}</text>
					</view>
					<view class="title">(总号源{{appointInfo.totalNum}}, 余号{{appointInfo.residueNum}})</view>
					<view class="desc">根据患者预约挂号的先后顺序依次就诊</view>
				</view>
				<view class="popup-content">
					<view class="item" v-for="(item, index) in orderDataList" :key="index" @click="toConfirm(item)">
						<text>{{item.numNo}}号</text>
						<text>{{item.numDate}}</text>
						<text>{{item.numTime}}</text>
						<text>{{item.weekName}} ({{getTxt(item.ampm)}})</text>
					</view>

				</view>
			</uni-popup>

		</view>
	</view>
</template>

<script>
	import requestV2 from '@/utils/request'
	export default {
		data() {
			return {
				doctorList: [],
				currTab: 0, //0 按专家、 1按日期
				deptId: '',
				pageObj: {
					dateList: [],
					docList: []
				},
				dateIndex: 0,
				selectDate: '',
				orderDataList: [],
				appointInfo: {},
				docInfo: {},
			}
		},
		onLoad(option) {
			this.deptId = option.deptId
			this.getList()
		},
		methods: {
			getTxt(txt) {
				let tx = '全天'
				if (txt == 1) {
					tx = '上午'
				}
				if (txt == 2) {
					tx = '下午'
				}
				return tx
			},
			dateSelect(item, index) {
				console.log(`=====item========>`, item)
				this.dateIndex = index
				this.selectDate = item.date
				this.getList();
			},
			toReg(index) {
				this.currTab = index
				this.getList();
			},

			appoint(item) {
				console.log(`======appoint===item====>`, item)
				this.docInfo = item
				this.$store.state.regDocDetail = item
				if (this.currTab === 0) {
					//科室挂号跳转到新页面
					let url = '/PagesRegV2/appointment/RegisterDoctorScheList?deptId=' + item.deptId + "&docId=" + item.docId
					console.log(`======请求地址和参数=======>`, url)
					uni.navigateTo({
						url
					})
				} else {
					this.appointInfo = item
					//日期挂号在本页面弹
					this.getScheDetail(item)
				}
			},
			close() {
				this.$refs.popup.close()
			},

			//按类型获取预约列表
			async getList() {
				let _this = this;
				let payload = {};
				payload.deptId = this.deptId
				payload.service = 'smarthos.plat.gh.hos.reg.doctors.list' //按专家

				if (this.currTab === 1) {
					payload.selectDate = this.selectDate
					payload.service = "smarthos.plat.gh.hos.date.doctors.list"; //按日期
				}


				let res = await requestV2.post(payload)
				console.log("restip==>", res);

				if (res.code == '0') {
					if (this.currTab === 0) {
						this.doctorList = res.list
					} else {
						this.pageObj = res.obj
						if (this.pageObj.dateList && this.pageObj.dateList.length > 0) {
							this.pageObj.dateList = this.pageObj.dateList.map(ele => {
								console.log("fdsfdsafffff",ele);
								ele.dateTxt = ele.date ? ele.date.substring(5) : ele.date
								return ele
							})
						}
						this.pageObj.docList = this.pageObj.docList || []
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},

			/**
			 * 获取号源明细列表
			 * @param item
			 */
			async getScheDetail(item) {
				console.log(`======getScheDetail=======>`, item)
				let payload = {};
				payload.scheduleId = item.scheduleId
				payload.service = 'smarthos.plat.gh.doc.schedule.num.detail.list'

				let res = await requestV2.post(payload)
				console.log("restip==>", res);
				this.$refs.popup.open()
				if (res.code == '0') {
					this.orderDataList = res.list || []
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},

			toConfirm(item) {
				this.$refs.popup.close()
				// 收集信息后保持,跳转
				let confirmPayInfo = {
					item, //号源信息
					docInfo: this.docInfo // 医生信息
				}
				this.$store.state.confirmPayInfo = confirmPayInfo
				uni.navigateTo({
					url: '/PagesRegV2/appointment/AppointmentConfirm'
				})
			}

		}
	}
</script>

<style lang="scss">
	.tab {
		margin: 0 15px;
		padding: 15px;
		color: #333333;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 5px;

		>text {
			color: #F2F2F2;
		}

		.tab-item {
			background-color: #FFFFFF;
			border: 1px solid $uni-color-primary;
			padding: 5px 10px;
		}

		.tab-left {
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
		}

		.tab-right {
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
		}


		.tab-item-active {
			background-color: $uni-color-primary;
			color: #FFFFFF;
			padding: 5px 10px;
		}

	}

	.dept-list {
		margin-left: 15px;
		margin-right: 15px;
		font-size: 14px;
		color: #202020;

		.dept {

			display: flex;
			align-items: center;
			padding: 10px 0;
			line-height: 25px;
			border-bottom: 1px solid #F2F2F2;

			.left {
				flex: 1;

				.title {
					font-size: 16px;
					font-weight: bold;
					color: #111111;
				}

				>view {
					padding: 5px 10px;
					font-size: 14px;
					color: #666666;
				}
			}

			.right {
				color: $uni-color-primary;
				padding: 15px 0 15px 15px;
			}
		}
	}

	//按日期挂号
	.date-list {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		overflow-x: auto;
		white-space: nowrap;

		.date-item {
			border: 1px solid #f2f2f2;
			padding: 5px 10px;
			width: 40px;
			border-radius: 5px;
			font-size: 14px;
			color: #333333;
			text-align: center;
			line-height: 25px;
		}

		.date-item-select {
			font-size: 14px;
			color: #FFFFFF;
			background-color: $uni-color-primary;
		}
	}

	//医生排班列表
	.my-popup {
		.popup-title {
			padding: 15px;
			border-bottom: 1px solid #f2f2f2;

			.title {
				padding: 5px 10px;
				text-align: center;
				font-size: 16px;
				color: #111111;

				>text {
					padding: 5px;
				}
			}

			.desc {
				padding: 5px 10px;
				text-align: center;
				font-size: 12px;
				color: #999999;
			}
		}

		.popup-content {
			height: 300px;
			overflow-y: auto;
			margin: 0 15px;

			.item {
				padding: 15px 0;
				text-align: center;
				font-size: 14px;
				color: #666666;
				border-bottom: 1px solid #f2f2f2;

				>text {
					padding: 10px 8px
				}
			}
		}
	}
</style>